<template>
  <div class="es-block">
    <Title>顺义区</Title>
    <div class="map_container" @click="goMapView">
      <!-- echarts 图表地图 -->
      <!-- <Chart :option="option" /> -->
      <!-- 图片地图 -->
      <img class="map_img" src="@/assets/images/largeScreen/map.jpg" alt="">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Title from '../Title.vue'
import Chart from '@/components/chart/Chart.vue'
import chinaJson from '@/assets/data/shunyi.json'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'

const router = useRouter()

echarts.registerMap('china', chinaJson)
const option = ref({
  geo: {
    type: 'map',
    map: 'china',
    roam: true,
    zoom: 60,
    z: 5,
    center: [116.701162, 40.144726],
    name: '顺义区',
    top: '5%',
    bottom: '5%',
    itemStyle: {
      areaColor: '#2E72BF',
      borderColor: '#333',
    },
  },
  legend: {
    left: '5%',
    bottom: '5%',
    orient: 'vertical',
    textStyle: {
      color: '#aaa',
    },
  },
})

const goMapView = () => {
  router.push('/map')
}
</script>

<style lang="scss" scoped>
.es-block {
  width: 100%;
  height: 100%;
  padding: 16px;
  // background-color: var(--es-block-bg);
}

.map_container {
  width: 100%;
  height: 98%;
  display: flex;
  justify-content: center;
  align-items: center;

  .map_img {
    transform: scale(0.77);
  }
}
</style>
